<template>
  <div class="wrap">
    <div class="top">
      <div class="header">
        <section class="header-left">
          <span @click="fun()"></span>
        </section>
        <section class="header-title">支付订单</section>
        <section class="header-right"></section>
      </div>
      <div class="movie-info">
        <div class="movie-infowrap">
          <img src="../../../public/images/1.jpg" alt="" />
          <div class="inform">
            <div class="m-title">怒火重案</div>
            <div class="m-date">今天9月6日 17:25 (粤语2D)</div>
            <div class="m-local">香港未来主题影院</div>
            <div class="m-seats">VIP7号哆啦A梦厅（若3D影片建议自备3D眼镜）</div>
          </div>
        </div>
      </div>
      <div class="ticket-change">
        <div class="ticket-changewrap">
          <div class="changes">
            <img src="../../../public/images/nochange.png" alt="" /> 不支持退票
          </div>
          <div><img src="../../../public/images/ok.png" alt="" /> 支持改签</div>
          <div></div>
          <div class="changes-notice">退改签须知</div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="pay-info">
        <div class="pay-infoT" @click="show = true">
          <div>活动与抵用券</div>
          <div>无可用</div>
          <van-action-sheet v-model="show" title="活动与抵用券" @click="stopPro($event)" @click-overlay="overlay">
            <div class="content">暂无</div>
          </van-action-sheet>
        </div>
        <div class="pay-infoB">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div>票价小计</div>
          <div>￥33.9</div>
        </div>
        <div class="ticket-man">
          <div class="addman">
            <div @click="gotobuyer()">
              <img src="/images/add.png" alt="" /> 请添加购票人
            </div>
          </div>
        </div>
        <div class="card" @click="vip()">
          <div class="cardTop">
            <div>影城折扣卡</div>
            <p>影城同时为您提供多种有效期折扣卡</p>
          </div>
          <div class="cardBottom">
            <div class="cardBottomsale">
              <div>
                <span>影城专属卡</span>
                <a href=""> 开通后
                  <u>本单立减3元</u>
                </a>
              </div>
              <div style="width=1rem"></div>
              <div>
                <p>￥9.9/季度</p>
                <p>
                  <s>￥15/季度</s>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods">
      <div class="goods-set">
        <div>观影标配</div>
        <p>客官，爆米花跟电影最配噢~</p>
      </div>
      <section class="goodsbox">
        <div class="glass" v-for="(v,i) in arr" :key="i">
          <img :src="v.imgurl" alt="">
          <div class="glass-right">
            <p>
              <span class="ye">单人</span>&nbsp;{{v.title}}</p>
            <p>&nbsp;</p>
            <p class="num-bottom">
              <span class="single">
                <u>{{v.sPrice}}</u>
                <s>￥10</s>
              </span>
              <span class="goods-num">
                <span class="cut" @click="cut(i)"></span>
                <span class="num">{{v.count}}</span>
                <span class="add" @click="add(i)"></span>
              </span>
            </p>
          </div>
        </div>

        <div class="glass-num" @click="show=true">
          <div>抵用券</div>
          <div>无可用</div>
          <van-action-sheet v-model="show" title="抵用券" @click="stopPro($event)" @click-overlay="overlay" :overlay-style="{background:'rgba(0,0,0,0.3)'}">
            <div class="content">暂无可用抵用券</div>
          </van-action-sheet>
        </div>
        <div class="glass-numB">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div>小吃小计</div>
          <div class="ddd">￥{{glasstotalPrice}}</div>
        </div>
      </section>

      <section class="phone">
        <div class="phoneNum">
          <div>
            <p>手机号</p>
            <p>13666666666</p>
          </div>
        </div>
        <div class="phoneTip">
          <div>
            <p>手机号仅用于生成订单，取票码不再以短信发送</p>
          </div>
        </div>
      </section>
      <section class="box"></section>
    </div>
    <div class="footer">
      <div class="price">
        <div>
          ￥
          <span class="totalprice">{{ 33.9 + glasstotalPrice }}</span>
        </div>
      </div>
      <div class="payinfo">
        <div>明细</div>
      </div>
      <div class="pay">
        <div>确认支付</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          title: '成人3D眼镜一副',
          imgurl: '/images/glass1.jpg',
          sPrice: '3.5',
          count: 0
        },
        {
          title: '挂片3D眼镜一副',
          imgurl: '/images/glass2.jpg',
          sPrice: '5.5',
          count: 0
        },
        {
          title: '3D眼镜：儿童款1副',
          imgurl: '/images/glass3.jpg',
          sPrice: '3.5',
          count: 0
        }
      ],
      show: false
    }
  },
  methods: {
    //跳转到购票人
    gotobuyer() {
      this.$router.push('/realname')
    },
    //返回上一个
    fun() {
      this.$router.go(-1)
    },
    //开通折扣卡
    vip() {
      this.$router.push('/zk')
    },
    //商品数量增加
    add(i) {
      this.arr[i].count++
    },
    //商品数量减少
    cut(i) {
      this.arr[i].count--
      if (this.arr[i].count < 0) {
        this.arr[i].count = 0
      }
    },
    // stopPro(e) {
    //   e.stopPropagation(); //阻止冒泡
    //   e.preventDefault(); //阻止默认事件
    // },
    overlay() {
      this.show = true
      setTimeout(() => {
        this.show = false
      }, 100)
    },
    stopPro(e) {
      e.stopPropagation() //阻止冒泡
      e.preventDefault() //阻止默认事件
    }
    // overlay(){
    // 	this.show = true;
    // 	setTimeout(()=>{
    // 			this.show = false;
    // 	},100)
    // }
  },
  computed: {
    glasstotalPrice() {
      // for (let i = 0; i < this.arr.length; i++) {
      //     let arr = this.arr[i];
      //     glasstotalPrice += arr.price * v.count;
      // }
      let glasstotalPrice = this.arr.reduce((a, b) => {
        a += b.sPrice * b.count
        return a
      }, 0)
      return glasstotalPrice
    }
  }
}
</script>

<style scoped>
.ddd {
  color: red;
}
.top {
  background-image: linear-gradient(135deg, #88b3ca, #7195a8);
}
.header {
  width: 100%;
  height: 0.68rem;
  /* background-image: linear-gradient(135deg, #88b3ca, #7195a8);  */
  display: flex;
  padding-top: 0.16rem;
}
.header-right,
.header-left {
  width: 15%;
  height: 100%;
  position: relative;
}
.header-title {
  width: 70%;
  font-size: 0.3rem;
  color: white;
  text-align: center;
  line-height: 0.68rem;
}
.header-left span {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  /* background: url("") */
  width: 0.3rem;
  height: 0.3rem;
  content: '';
  border-top: 0.04rem solid white;
  border-left: 0.04rem solid white;
  transform: rotate(-45deg);
}
.movie-info {
  width: 100%;
  height: 2.8rem;
  /* background-image: linear-gradient(135deg, #88b3ca, #7195a8);  */
}
.movie-infowrap {
  width: 92%;
  padding: 0.25rem;
  display: inline-flex;
  /* justify-content: space-around; */
}
.movie-infowrap img {
  display: block;
  width: 1.45rem;
  height: 2rem;
}
.inform div {
  color: white;
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;
}
.m-title {
  font-size: 0.36rem;
}
.ticket-changewrap {
  display: flex;
  justify-content: space-around;
}
.ticket-change {
  background-color: rgb(105, 139, 156);
  height: 1.3rem;
  border-top-right-radius: 0.24rem;
  border-top-left-radius: 0.24rem;
}
.ticket-changewrap div {
  color: white;
  font-size: 0.26;
  margin-top: 0.25rem;
  width: 25%;
  text-align: center;
}
.ticket-changewrap div img {
  display: inline-block;
  width: 0.26rem;
  height: 0.26rem;
}
.middle {
  /* height: 60px; */
  position: relative;
}
.pay-info {
  width: 100%;
  border-top-right-radius: 0.24rem;
  border-top-left-radius: 0.24rem;
  background-color: white;
  position: absolute;
  top: -0.5rem;
}
.pay-infoT {
  height: 0.9rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.02rem solid rgb(239, 239, 239);
}
.pay-infoT div {
  line-height: 0.9rem;
  font-size: 0.28rem;
}
.pay-infoB {
  height: 0.9rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.pay-infoB div {
  width: 20%;
  line-height: 0.9rem;
  text-align: center;
  font-size: 0.28rem;
}
.ticket-man {
  width: 100%;
  height: 1.3rem;
  background-color: rgb(245, 245, 249);
  position: relative;
}
.addman {
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  color: rgb(243, 79, 67);
  background-color: #fff;
  position: absolute;
  top: 0.2rem;
  font-size: 0.3rem;
}
.addman div img {
  width: 0.32rem;
  height: 0.32rem;
  vertical-align: middle;
  margin-right: 0.04rem;
}
.cardTop {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0.22rem 0rem;
}
.cardTop div {
  font-size: 0.32rem;
}
.cardTop p {
  font-size: 0.24rem;
  color: #999999;
}
.cardBottomsale {
  width: 90%;
  height: 1.4rem;
  background: url('../../../public/images/优惠卡.png') no-repeat;
  background-size: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  padding-bottom: 0.2rem;
}
.cardBottomsale div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cardBottomsale div p {
  color: #572c16;
  width: 2.6rem;
  text-align: center;
}
.cardBottomsale div {
  font-size: 0.32rem;
}
.cardBottomsale div span {
  width: 2.6rem;
  color: #572c16;
  font-size: 0.28rem;
}
.cardBottomsale div a {
  width: 2.6rem;
  font-size: 0.2rem;
  color: #ba8b59;
}
.cardBottomsale div u {
  color: #ff9800;
}
.cardBottomsale div s {
  font-size: 0.2rem;
  color: #ba8b59;
  border: 0.02rem solid #ba8b59;
  opacity: 0.7;
}
.card {
  border-bottom: 0.02rem solid rgb(239, 239, 239);
}
.goods {
  background-color: white;
  height: 1rem;
  margin-top: 5.1rem;
  /* width: ; */
}
.goods-set {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0.22rem 0rem;
  border-bottom: 0.02rem solid rgb(239, 239, 239);
}
.goods-set div {
  font-size: 0.32rem;
}
.goods-set p {
  font-size: 0.24rem;
  color: #999999;
}
.glass {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
  border-bottom: 0.02rem solid rgb(239, 239, 239);
}
.glass img {
  width: 1.9rem;
  height: 1.9rem;
}
.glass .glass-right {
  width: 67%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1.84rem;
}
.glass p {
  font-size: 0.3rem;
}
.ye {
  display: inline-block;
  background-color: #f90;
  border-radius: 0.04rem;
  font-size: 0.2rem;
  color: #ffffff;
  padding: 0.02rem 0.08rem;
}
.glass s {
  font-size: 0.24rem;
  color: #999;
  margin-left: 0.1rem;
}
.glass u {
  color: #f03d37;
  font-size: 0.34rem;
}
.num-bottom {
  display: flex;
  justify-content: space-between;
}
.goods-num span {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
}
.goods-num {
  position: relative;
  height: 0.5rem;
}
.cut {
  background: url('../../../public/images/cut.png');
  background-size: 0.5rem;
  margin-right: 0.5rem;
}
.add {
  margin-right: 0.2rem;
  background: url('../../../public/images/addnum.png');
  background-size: 0.5rem;
}
.num {
  text-align: center;
  position: absolute;
  left: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
}
.glass-num {
  height: 0.9rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.02rem solid rgb(239, 239, 239);
}
.glass-num div {
  line-height: 0.9rem;
  font-size: 0.28rem;
}

.glass-numB {
  height: 0.9rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.glass-numB div {
  width: 20%;
  line-height: 0.9rem;
  text-align: center;
  font-size: 0.28rem;
}
.phoneNum {
  background-color: #fff;
  /* padding-top: 0.2rem */
}
.phoneNum div {
  width: 90%;
  margin: 0 auto;
  display: flex;
  height: 1rem;
}
.phoneNum div p {
  text-align: center;
  line-height: 1rem;
  margin-right: 0.5rem;
}
.phoneTip {
  height: 0.72rem;
  background-color: #fff;
}
.phoneTip div {
  width: 90%;
  margin: 0 auto;
  font-size: 0.24rem;
  color: #999999;
}
.phone {
  height: 2.2rem;
  background-color: rgb(239, 239, 239);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer {
  width: 100%;
  height: 1.6rem;
  background-color: white;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}
.box {
  height: 1.6rem;
  width: 100%;
}
.price {
  width: 40%;
}
.pay {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pay div {
  background-color: #ff9e05;
  width: 3rem;
  height: 0.9rem;
  text-align: center;
  line-height: 0.9rem;
  border-radius: 0.1rem;
  color: #ffffff;
}
.price div {
  line-height: 1.6rem;
  color: red;
  font-size: 0.28rem;
}
.payinfo {
  line-height: 1.6rem;
}
.payinfo div {
  color: #999999;
  font-size: 0.28rem;
}
.totalprice {
  font-size: 0.42rem;
  color: red;
}
.content {
  padding: 0.32rem 0.32rem 3.2rem;
  color: #999999;
  text-align: center;
}
.goodsbox {
  background-color: #ffffff;
}
.van-action-sheet {
  height: 9rem;
}
.van-overlay {
  -webkit-tap-highlight-color: transparent;
  font-size: 0.28rem !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB',
    'Microsoft Yahei', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2051;
}
</style>
